﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>可伸缩列表</title>
    <link href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
</head>
<body>
    <div id="accordion" style="width:500px">
        <span>操作系统</span>
        <div>
            <ul>
                <li>Windows</li>
                <li>Linux</li>
                <li>Unix</li>
            </ul>
        </div>
        <span>数据库</span>
        <div>
            <ul>
                <li>SQL Server</li>
                <li>Oracle</li>
                <li>MySQL</li>
            </ul>
        </div>
        <span>编程语言</span>
        <div>
            <ul>
                <li>C++</li>
                <li>C#</li>
                <li>Java</li>
                <li>JavaScript</li>
                <li>Python</li>
            </ul>
        </div>
    </div>
    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var icons = {
                header: "ui-icon-circle-arrow-e",
                activeHeader: "ui-icon-circle-arrow-s"
            };
            $("#accordion").accordion({
                icons: icons
            });
        })
    </script>
</body>
</html>
